/* contact */
.contact {
  padding-top: 8%;
  padding-bottom: 120px;
  background: var(--bgr-gra1);
}

.contact h1 {
  font-size: 80px;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: 4px;
}

.contact p {
  padding: 0px 8%;
}

@media (max-width: 1200px) {
  .contact {
    padding-bottom: 100px;
    padding-top: 100px;
  }

  .contact h1 {
    font-size: 70px;
  }
} 
  
@media (max-width: 991px) {
  .contact h1 {
    font-size: 60px;
  }
}

@media (max-width: 768px) {
  .contact {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .contact h1 {
    font-size: 50px;
  }

  .contact p {
    padding: 0px;
  }
}

/* contact form */
.contact-form {
  position: relative;
  top: -80px;
}

.contact-form .container {
  border-radius: 20px;
  border: 1px solid var(--light-brw);
  background: #FFF;
  padding: 60px 60px 50px 60px;
}

.contact-form .sub-title-1 {
  width: 100%;
  color: #775628;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  font-size: calc(100% + 4px);
}

.contact-form .sub-title-2 {
  margin-top: 10px;
  margin-bottom: 20px;
  padding-right: 20px;
}

@media (max-width: 991px) {
  .contact-form .title h2,
  .contact-form .sub-title-1,
  .contact-form .sub-title-2 {
    text-align: center;
  }

  .contact-form .sub-title-2 {
    padding-left: 20px;
  }

  .contact-form .container {
    padding: 40px 50px;
  }
}

@media (max-width: 768px) {
  .contact-form .title h2 {
    margin-top: 0px;
  }

  .contact-form .sub-title-2 {
    padding: 0px;
  }

  .contact-form {
    top: -70px;
  }
}

@media (max-width: 576px) {
  .contact-form {
    padding-left: 15px;
    padding-right: 15px;
  }

  .contact-form .container {
    padding: 40px 30px;
  }
}

/*SIGN UP FORM*/
form {
  width: 100%;
  overflow: hidden;
}

form .holder-input {
  gap: 28px;
}

.sign-in-form img {
  width: 28px;
}

.sign-in-form .line {
  width: 2px;
  height: 28px;
  background: var(--light-brw);
}

.input-field {
  border-radius: 14px;
  border: 1px solid #D8D8D8;
  background: #FFF;
  padding: 10px 10px 10px 15px ;
  gap: 10px;
}

.error-mess {
  position: absolute;
  color: red;
  padding-left: 50px;
  display: none;
}

#error-message-name {
  top: 48px;
}

#error-message-phone {
  top: 126px;
}

#error-message-email {
  top: 202px;
}

input {
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border: none;
}

input:not([type="checkbox"]) {
  width: 100%;
}

.btn-contact {
  padding: 10px 30px;
  border-radius: 14px;
  background: #9A7D66;
  color: #FFF;
  font-size: 18px;
  outline: none;
  line-height: 18px;
  border: 3px solid #9A7D66;
  cursor: pointer;
  margin-bottom: 15px;
}

.btn-contact:hover,
.btn-contact:focus,
.btn-contact:active {
  color: #775628;
  outline: none;
  box-shadow: 0px 100px 0px rgba(255, 255, 255, 0.85) inset;
  border: 3px solid #9A7D66;
}

@media (max-width: 1200px) {
  .btn-contact {
    padding: 10px 26px;
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  .btn-contact {
    padding: 10px 30px;
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  form .holder-input {
    gap: 22px;
  }

  .sign-in-form img {
    width: 24px;
  }

  .input-field {
    border-radius: 12px;
    gap: 8px;
    padding: 7px 7px 7px 15px;
  }

  .sign-in-form .line {
    width: 1.5px;
    height: 24px;
  }

  .error-mess {
    padding-left: 42px;
    font-size: 13px;
  }
  
  #error-message-name {
    top: 38px;
  }
  
  #error-message-phone {
    top: 102px;
  }
  
  #error-message-email {
    top: 165px;
  }
}

/* more info */
.more-info {
  position: relative;
  top: -30px;
  padding-bottom: 5%;
}

.more-info .row {
  gap: 20px;
}

.more-info .col,
.more-info .col-sm {
  padding: 30px 20px;
  border-radius: 20px;
  gap: 10px;
  box-shadow: 34.854px 29.626px 48.34px 0px rgba(236, 233, 227, 0.23);
}

.more-info .phone {
  background: rgba(224, 209, 192, 0.60);
}

.more-info .email {
  background: #ECE9E3;
}

.more-info .location {
  border: 1px solid var(--light-brw);
}

.more-info .icon {
  padding: 10px;
  background: #fff;
  border-radius: 20px;
}

.location .icon {
  background: rgba(224, 209, 192, 0.60);
}

.more-info img {
  width: 40px;
}

.more-info h3 {
  margin-bottom: 5px;
}

.more-info p {
  margin-bottom: 0px;
  color: #855F39;
}

#info-2 {
  display: none;
}

#info-2 .row {
  margin-bottom: 14px;
}

@media (max-width: 1200px) {
  .more-info .row {
    gap: 14px;
  }

  .more-info img {
    width: 32px;
  }

  .more-info .icon {
    padding: 8px;
    border-radius: 16px;
  }

  .more-info .col,
  .more-info .col-sm {
    padding: 25px 20px;
  }
}

@media (max-width: 991px) {
  #info-1 {
    display: none;
  }

  #info-2 {
    display: block;
  }
}

@media (max-width: 576px) {
  .row {
    padding-right: 15px;
    padding-left: 15px;
  }
}

.ggmap {
  margin-top: 30px;
  border: 8px solid var(--light-brw);
  border-radius: 20px;
  width: 100%;
  height: 500px;
}

/* Animation */
.contact .container {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: 1s;
}

.contact-form {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  animation-duration: 1s;
}

.contact-form .btn-contact.visible {
  -webkit-animation-name: heartBeat;
  animation-name: heartBeat;
  animation-duration: 1s;
}

.more-info.visible {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 1s;
}

.map h2.visible {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  animation-duration: 1s;
}

/* .ggmap.visible {
  -webkit-animation-name: slideInUp;
  animation-name: slideInUp;
  animation-duration: 1s;
} */